<template>
  <div class="app-container">
    <div class="top">
      <div class="operate">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['indexMgmt:definition:add']"
          >新增
        </el-button>
        <el-button
          icon="el-icon-edit"
          size="mini"
          :disabled="single != true"
          @click="handleUpdate()"
          v-hasPermi="['indexMgmt:definition:edit']"
          >编辑
        </el-button>
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="qulityControl">
          <el-select
            v-model="queryParams.qulityControl"
            placeholder="请选择品控关注"
            size="small"
            clearable
          >
            <el-option
              v-for="item in dict.sys_yes_no"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="indexType">
          <el-select
            v-model="queryParams.indexType"
            placeholder="请选择指标类型"
            size="small"
            clearable
          >
            <el-option
              v-for="item in dict.indexType"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="bizOrgDimension">
          <el-select
            v-model="queryParams.bizOrgDimension"
            placeholder="请选择组织维度"
            size="small"
            clearable
          >
            <el-option
              v-for="item in dict.indexBizOrgDimension"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="timeDimension">
          <el-select
            v-model="queryParams.timeDimension"
            placeholder="请选择时间维度"
            size="small"
            clearable
          >
            <el-option
              v-for="item in dict.indexTimeDimension"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="searchValue">
          <el-input
            v-model="queryParams.searchValue"
            placeholder="请输入关键字"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 44px - 50px)"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="元指标编码" prop="indexCode">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleShowDetail(row)">{{
            row.indexCode
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="元指标名称" prop="indexName"> </el-table-column>
      <el-table-column label="指标类型" prop="indexType">
        <template slot-scope="{ row }">
          {{ indexTypeDictMap[row.indexType] }}
        </template>
      </el-table-column>
      <el-table-column label="指标粒度" prop="indexGranularity">
        <template slot-scope="{ row }">
          {{ indexGranularityDictMap[row.indexGranularity] }}
        </template>
      </el-table-column>
      <el-table-column label="品控关注" prop="qulityControl">
        <template slot-scope="{ row }">
          {{ sysYesNoDictMap[row.qulityControl] }}
        </template>
      </el-table-column>
      <el-table-column label="组织维度" prop="bizOrgDimension">
        <template slot-scope="{ row }">
          {{ bizOrgDimensionDictMap[row.bizOrgDimension] }}
        </template>
      </el-table-column>
      <el-table-column label="时间维度" prop="timeDimension">
        <template slot-scope="{ row }">
          {{ timeDimensionDictMap[row.timeDimension] }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="disableFlag">
        <template slot-scope="{ row }">
          <span :class="'status-' + row.disableFlag">{{
            row.disableFlag == "Y" ? "禁用" : "启用"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="['indexMgmt:definition:edit']"
            type="text"
            @click.stop="handleUpdate(row)"
            >编辑</el-button
          >
          <el-button
            v-if="row.disableFlag == 'Y'"
            v-hasPermi="['indexMgmt:definition:start']"
            type="text"
            @click="handleDisabledChange(row)"
            >启用</el-button
          >
          <el-button
            v-if="row.disableFlag == 'N'"
            v-hasPermi="['indexMgmt:definition:stop']"
            type="text"
            @click="handleDisabledChange(row)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <DetailDialog
      :visible.sync="detailDialog.visible"
      :row="detailDialog.row"
      :disabled="detailDialog.disabled"
      @submit-success="getList"
    ></DetailDialog>
  </div>
</template>
<script>
import { getIndexList, disableIndex } from "@/api/indexMgmt/definition";
import { getIndexConfigList } from "@/api/indexMgmt/configuration";
import DetailDialog from "./detailDialog";
export default {
  name: "IndexDefinition",
  components: { DetailDialog },
  dicts: [
    "sys_yes_no",
    "indexType",
    "indexBizOrgDimension",
    "indexTimeDimension",
    "indexGranularity",
  ],
  data() {
    return {
      queryParams: {
        searchValue: "",
        qulityControl: "",
        indexType: "",
        bizOrgDimension: "",
        timeDimension: "",
      },
      list: [],
      single: null,
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      detailDialog: {
        visible: false,
        row: null,
        disabled: false,
      },
    };
  },
  created() {
    //获取列表数据
    this.getList();
  },
  computed: {
    sysYesNoDictMap() {
      return this.dictToMap(this.dict.sys_yes_no);
    },
    indexTypeDictMap() {
      return this.dictToMap(this.dict.indexType);
    },
    bizOrgDimensionDictMap() {
      return this.dictToMap(this.dict.indexBizOrgDimension);
    },
    timeDimensionDictMap() {
      return this.dictToMap(this.dict.indexTimeDimension);
    },
    indexGranularityDictMap() {
      return this.dictToMap(this.dict.indexGranularity);
    },
  },
  methods: {
    getList() {
      this.loading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager;
      const params = {
        query: {
          ...this.queryParams,
        },
        pageNum,
        pageSize,
      };
      getIndexList(params)
        .then((response) => {
          if (response.code == 200) {
            this.list = response.rows || [];
            this.pager.total = response.total;
          } else {
            this.list = [];
            this.pager.total = 0;
          }
          this.loading = false;
        })
        .catch(() => {
          this.list = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.single = false;
      } else if (selection.length == 1) {
        this.single = true;
      } else {
        this.single = null;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pager.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.detailDialog.row = null;
      this.detailDialog.visible = true;
      this.detailDialog.disabled = false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!row) {
        row = this.$refs.Table.selection[0] || null;
      }
      this.detailDialog.row = row;
      this.detailDialog.visible = true;
      this.detailDialog.disabled = false;
    },
    /** 查看详情按钮操作 */
    handleShowDetail(row) {
      this.detailDialog.row = row;
      this.detailDialog.visible = true;
      this.detailDialog.disabled = true;
    },
    /** 禁用/启用按钮操作 */
    async handleDisabledChange(row) {
      if (!row) {
        return;
      }
      let msg = "";
      let isDisabled = row.disableFlag == "Y";

      if (isDisabled) {
        // 禁用
        msg = `确定启用${row.indexName}吗？`;
      } else {
        const params = {
          query: {
            metaIndexIds: row.id || null,
          },
          pageNum: 1,
          pageSize: 10,
        };
        const res = await getIndexConfigList(params);
        // 启用
        msg =
          res?.total > 0
            ? `${row.indexName}元指标已被配置指标，是否确认禁用？`
            : `确定禁用${row.indexName}吗？`;
      }

      this.$confirm(msg, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          const param = {
            id: row.id,
            disableFlag: isDisabled ? "N" : "Y",
          };
          return disableIndex(param);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("操作成功");
        });
    },
    /**
    handleExport() {

    }
    **/
  },
};
</script>
<style lang="scss" scoped>
.top {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pagination-container {
  margin: 0;
}
.status-Y {
  color: #d9001b;
  font-weight: 600;
}
.status-N {
  color: #88c446;
  font-weight: 600;
}
</style>
